<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html><head>
<title>Sanitized JQuery Templates Test</title>
<script src="js/jquery-1.5.2.js"></script>
<script src="js/jquery.tmpl.js"></script>
<script src="js/compat.js"></script>
<script src="js/contextDefs.js"></script>
<script src="js/contextUpdate.js"></script>
<script src="js/escapers.js"></script>
<script src="js/jquery-templates.js"></script>
<script src="js/fixupJson.js"></script>
<script src="js/jqueryTemplatesTestbed.js"></script>
<style>
body { padding: .5em }
small { font-size: 50% }
body, td, th { vertical-align: top }
textarea { font-size: 100%; margin: 0 }
#htmlContent, #data {
  width:100%; padding: .25em;
  font-family: monospace
}
table { empty-cells: show }
.error { color: red }
pre, textarea { white-space: pre-wrap; min-width: 40em }
textarea#htmlContent { white-space: pre }
#permalink {
  border: 2px solid #fc0;
  padding: .125em;
  background-color: #ffe;
  font-family: monospace;
  width: 100%
}
.sanitizer { text-decoration: underline }
h1,h2,h3 { margin-bottom: 0 }
hr { height: 3px; background-color: #9cf; width: 90% }
#sanitizer-output pre, #template-output > pre, #template-output > p {
  background-color: #eee;
  border: 2px solid #aaa;
  padding: .25em
}
.arrowbtn {
  font-size: 150%; -moz-border-radius: .25em;
  border-radius: .25em; width: 100%;
  margin-bottom: .5em
}
.headerrow th { padding-top: 2em }
.col0, .col2 { max-width: 45%; width: 45%; overflow: auto }
.col1 { max-width: 10%; width: 10% }
</style>
</head>

<body>
<h1>Sanitized JQuery Templates Test</h1>

<p>
<a href="http://api.jquery.com/category/plugins/templates/">JQuery templates</a>
make sure that the results of expressions in
<code>${&hellip;}</code> are encoded via <code>$.encode(&hellip;)</code>,
but this is not always ideal.  Below, you can experiment with a
JQuery template rewriter that adds encoding functions to
<code>${&hellip;}</code> based on the context in which they appear.
You can use the buttons below to choose examples and play around with
the templates and data.  For more details, you can read about the
<a href="safetemplate.html">design</a> or peruse the
<a href="http://code.google.com/p/js-quasis-libraries-and-repl/source/browse/trunk/js/jquery-templates.js">source</a>
and <a href="http://code.google.com/p/js-quasis-libraries-and-repl/source/browse/trunk/js/jquery-templatesTest.js">tests</a>.
</p>

<p>
That source code includes a rewriter from JQuery templates to JQuery
templates.  It compresses well.  If you want to rewrite templates in
the browser, the download is
<a href="js/jquery-templates-compiled.js">less than 6kB gzipped</a>,
but if you want to rewrite the templates before serving them, then the
only download is the escaping functions which takes
<a href="js/jquery-escapers-only-compiled.js">less than 1.5kB gzipped</a>.
</p>

<p>Examples: <span id="exampleList"></span></p>
<script>populateExampleDropdown()</script>


<div style="padding-top: 1em; border-top: 3px solid #ccc">

<div style="text-align: right"><small>[
  <a onclick="showLink()" href="produces: a link you can email">permalink</a>
]</small></div>

<!--
  - Initially invisible but displayed when filled with a permalink.
  - Onblur, we hide again so it does not get out of sync with edited
  - textareas.
  -->
<textarea id="permalink" style="display:none" onclick="this.select()"
 onblur="$('#permalink').fadeOut(500)"
 ></textarea>

<div style="left: 0; right: -1em; position: relative">
<table cols=2 cellpadding=0 cellspacing=10 border=0 width=100%>
  <tr class=headerrow>
    <th class=col0><h3>Template Source</h3></th>
    <td class=col1></td>
    <th class=col2><h3>Template Source w/ sanitizers</h3></tr>

  <tr align=center>
    <td colspan=3>
      Enter your jQuery templates below or select one of the examples above
      to prefill with an example.</tr>

  <tr>
    <td class=col0>
      <textarea rows="15" id="htmlContent">
<!-- A jQuery template named "helloWorld" -->
<script type="text/x-jquery-tmpl" id="helloWorld">
Hello,
<b onclick="alert(${world})"> ${world} </b>!
</script>
</textarea>
    <td align=center class=col1>
      <button onclick="sanitize()" title="Sanitize Templates" class="arrowbtn"
       id="sanitize-button">&#x21f0;<br><small>rewrite</small></button></td>
    <td id=sanitizer-output class=col2></tr>

  <tr class=headerrow>
    <th class=col0><h3>Data for Template</h3></th>
    <td class=col1></td>
    <th class=col2><h3>Rendered Template</h3></tr>
  <tr align=center>
    <td colspan=3>Enter JSON data to pass to the template below.</tr>
  <tr>
    <td class=col0>
      <textarea rows=15 id=data onblur="this.value = fixupJson(this.value)">
{ value: 42, color: red, name: 'John Doe', "bars": ['foo1', 'foo2'], world: 'Cincinatti' }
</textarea>
    <td id="runbuttons" align="center" class=col1></td>
    <td id="template-output" class=col2></tr>
</table>
</div>

<script>populateInputsFromLink()</script>

<br>
<center><small>
<!-- hhmts start -->Last modified: Mon Apr 18 16:58:50 PDT 2011 <!-- hhmts end --></small></center>
</body></html>
